<template>

  <view class="list">
    <view class="item" v-for="(item,i) in list" :key="i">
      <image class="avatar" :src="item.headimg"></image>
      <view class="right">
        <view class="top">
          <view class="name">{{ item.nickname }}</view>
          <view class="btn" @click="handleTechnicianClick(item)">预约</view>
        </view>
        <!--<view class="tip">今日1人已约，最早可约7:30</view>-->
        <view class="image-list">
          <view class="image-wrapper" v-for="(word,i) in item.works" :key="i">
            <image class="image" :src="word.cover"></image>
          </view>
        </view>
        <view class="more" @click="handleTechnicianMore(item)">
          <text>查看作品{{item.worksCount}}个</text>
          <text class="cuIcon-right"></text>
        </view>

      </view>
    </view>


    <list-loading v-if="loading"/>
    <list-empty v-if="!loading && (!list || list.length == 0)"/>
    <list-load-over v-else-if=" loadOver"/>
  </view>
</template>

<script>
import Api from "@/utils/Api";
import ListLoading from "@/components/list/loading";
import ListEmpty from "@/components/list/empty";
import ListLoadOver from "@/components/list/loadOver";

export default {
  name: "choose-technician",
  components: {ListLoadOver, ListEmpty, ListLoading},
  data() {
    return {
      loading: false,
      selectModel: null,
      list: [],
      loadOver: true,
    }
  },
  onLoad(options) {
    options = this.core.decodeURIComponentObject(options);
    this.selectModel = options
    this.getList();
  },
  onPullDownRefresh() {
    this.refresh();
  },
  methods: {
    refresh(){
      this.clear();
      this.getList();
    },
    clear() {
      this.page = 0;
      this.list = [];
      this.loadOver = false;
      this.loading = false;
    },
    getList() {
      this.loading = true
      Api.getTechnicianList(this.selectModel.shopId, this.selectModel.goodsId).then(res => {
        this.list = res;
        this.loadOver = true;
      }).finally(() => this.loading = false)
    },
    handleTechnicianClick(item) {
      let data = {
        tId: item.id,
        tName: item.nickname,
        ...this.selectModel
      }
      uni.navigateTo({url: `/pages/shop/choose/time/index?${this.core.parseQueryString(data)}`})
    },
    handleTechnicianMore(item) {
      // uni.navigateTo({url: `/pages/shop/technician/index`})
      uni.navigateTo({url: `/pages/shop/technician/index?id=${item.id}`})
    },
    handleWorkInfoClick(item){
      // uni.navigateTo({url: `/pages/shop/technician/info?id=${item.memberId}`})
    },
  },
}
</script>

<style scoped lang='scss'>
.list {
  flex: 1;
  width: 100%;
  padding: r(30px);
  padding-bottom: calc(env(safe-area-inset-bottom) + #{r(30px)});

  .item {
    box-shadow: r(0px 4px 18px 0px) rgba(4, 0, 0, 0.13);
    border-radius: r(15px);
    overflow: hidden;
    padding: r(20px);
    display: flex;
    margin-bottom: r(30px);

    .avatar {
      height: r(138px);
      width: r(138px);
      border-radius: r(12px);
    }

    .right {
      flex: 1;

      .top {
        margin-left: r(20px);
        display: flex;
        justify-content: space-between;
        align-items: center;

        .name {
          flex: 1;
        }

        .btn {
          color: white;
          width: r(142px);
          height: r(55px);
          line-height: r(55px);
          background: #BF8F3A;
          border-radius: r(50px);
          font-size: r(26px);
          text-align: center;
        }
      }

      .tip {
        font-size: r(22px);
        font-weight: bold;
        color: #FF531E;
        margin: r(10px 0 10px 20px);
      }

      .image-list {
        display: flex;
        margin: r(20px 0);

        .image-wrapper {
          $image-size: calc(33.33% - #{r(20px)});
          height: 0;
          padding-bottom: $image-size;
          width: $image-size;
          position: relative;
          margin-left: r(20px);
          border-radius: r(12px);
          overflow: hidden;

          .image {
            height: 100%;
            width: 100%;
            position: absolute;
          }
        }
      }

      .more {
        font-size: r(20px);
        color: #909090;
        margin-left: r(20px);
      }

    }
  }


  &.goods {

    .item {
      .line {
        margin-top: r(20px);
        margin-left: r(20px);
        font-size: r(25px);
        color: #909090;
        text-decoration: line-through;
      }

      .tip {
        margin-top: 0;
        font-size: r(30px);
      }
    }

  }
}

</style>